import React, { useRef, useState, useEffect } from 'react';
import styles from './styles.module.less';
import AC1 from './AreaClip1';
import AC2 from './AreaClip2';

export default function Example() {
  const arrarr = useRef(new Array(21)).current;

  useEffect(() => {
    for (let i = 0; i < 21; i += 1) {
      const arr = [];
      for (let j = 0; j < 817; j += 1) {
        if (j > 300 && j < 320) {
          arr.push(Math.random() * 10 + 70);
        } else {
          arr.push(Math.random() * 10 + 10);
        }
      }
      arrarr[i] = arr;
    }
  }, []);

  return (
    <div className={styles.root}>
      <div>
        1
        <AC1
          onChange={(e) => {
            window.console.log(e);
            const { xs, ys } = e;
            const yy = [1 - ys[0], 1 - ys[1]];
            const i1 = Math.round(Math.min(yy[0], yy[1]) * arrarr.length);
            const i2 = Math.round(Math.max(yy[0], yy[1]) * arrarr.length);
            const arrrr = arrarr.slice(i1, i2);
            window.console.log(
              arrrr.map((a) => {
                return a;
              }),
            );
            for (let i = 0; i < arrrr.length; i += 1) {
              const arr = arrrr[i];
              const j1 = Math.round(xs[0] * arr.length);
              const j2 = Math.round(xs[1] * arr.length);
              arrrr[i] = arr.slice(j1, j2);
            }
            window.console.log(arrrr);
          }}
        />
      </div>
      <div style={{ position: 'relative' }}>
        2
        <AC2
          disable={false}
          // reset={resetKey}
          onChange={(e) => {
            window.console.log(e);
          }}
          onResize={(e) => {
            window.console.log(e);
          }}
        />
      </div>
    </div>
  );
}
